<template>
  <div class="app-container">
    <div class="filter-container">
      <span v-if="authorityHandle(107)" class="filter-title filter-item">身份所属</span>
      <k-select
        v-if="authorityHandle(107)"
        v-model="listQuery.userType"
        class="filter-item right-item"
        style="width:120px"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="handleFilter"
      />
      <span v-if="authorityHandle(107)" class="filter-title filter-item">房间类型</span>
      <k-select
        v-if="authorityHandle(107)"
        v-model="listQuery.roomType"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[{label:'玩家对战房',value: 2},{label:'主播对战房',value: 3}]"
        @handleSelectEvent="handleFilter"
      />
      <span v-if="authorityHandle(107)" class="filter-title filter-item">房间分类</span>
      <k-select
        v-if="authorityHandle(107)"
        v-model="listQuery.roomClass"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[{label:'二人对战房',value: 2},{label:'三人对战房',value: 3},{label:'四人对战房',value: 4}]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">对战时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" @hqchang="handleFilter" />

      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="进行搜索"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>

    <!--表格相关 -->
    <el-table
      ref="multipleTable"
      :data="listData"
      border
      fit
      highlight-current-row
      :show-summary="authorityHandle(209)"
      :summary-method="getSummaries"
      style="width: 100%; border-radius: 8px; margin-top: 30px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @sort-change="sortChange"
    >
      <el-table-column min-width="60px" type="index" label="序号" align="center" />
      <el-table-column prop="userMobile" min-width="100px" label="用户名" align="center" />
      <el-table-column prop="userTypeName" min-width="100px" label="身份所属" align="center" />
      <el-table-column prop="battleCount" min-width="100px" label="对战场次" sortable="custom" align="center" />
      <el-table-column prop="winPercent" min-width="100px" label="胜率" sortable="custom" align="center">
        <template slot-scope="scope">
          {{ parseFloat((scope.row.winPercent*100).toFixed(2)) }}%
        </template>
      </el-table-column>
      <el-table-column prop="battleObtain" min-width="100px" label="对战获得价值(J)" sortable="custom" align="center" />
      <el-table-column prop="newestBattleTime" min-width="100px" label="最近对战时间" align="center" show-overflow-tooltip="" />
      <el-table-column min-width="120px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
             <k-button class="table-btn" value="对战详情" @click.native="openBattleDetail(scope.row)" />
             <k-button class="table-btn" value="对战记录" @click.native="openBattleRecord(scope.row.userId)" />
          </div>
         
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 对战记录 -->
    <k-dialog
      :show-hide.sync="openBattleRecordDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="对战记录"
      class="record_dialog"
      :show-foot="false"
      :two-btn="false"
    >
      <div class="record_container">
        <el-table
          :data="recordData"
          border
          fit
          highlight-current-row
          style="width: 100%; border-radius: 5px; margin-top: 10px;"
          :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
        >
          <el-table-column prop="roomId" min-width="80px" label="房间ID" align="center" />
          <el-table-column prop="winStatus" min-width="80px" label="对战结果" align="center">
            <template slot-scope="scope">
              {{ getBattelResult(scope) }}
            </template>
          </el-table-column>
          <el-table-column min-width="350px" label="对战内容" align="center">
            <template slot-scope="scope">
              <div class="image-div">
                <div v-for="item in scope.row.boxList" :key="item.id" class="image-item" :title="item.boxName">
                  <el-image class="imageicon" :src="item.boxIcon" fit="contain" />
                  <i class="boxCount">{{ item.boxCount }}</i>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="200px" label="对战获得" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.roomStatus===3" class="table-cell" :title="JSON.parse(scope.row.goodsNames).join()">
                {{ JSON.parse(scope.row.goodsNames).join() }}
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="100px" label="房间类型" align="center">
            <template slot-scope="scope">
              {{ getRoomType(scope) }}
            </template>
          </el-table-column>
          <el-table-column min-width="100px" label="房间分类" align="center">
            <template slot-scope="scope">
              {{ scope.row.roomClass }}人对战房
            </template>
          </el-table-column>
          <el-table-column min-width="100px" label="房间状态" align="center">
            <template slot-scope="scope">
              {{ getRoomStatus(scope) }}
            </template>
          </el-table-column>
          <el-table-column prop="startTime" min-width="200px" label="对战时间" align="center" show-overflow-tooltip />
        </el-table>
        <pagination
          v-show="totalRows > 0"
          :total="totalRows"
          :page.sync="recordPager.pageNo"
          :limit.sync="recordPager.pageSize"
          @pagination="openBattleRecord(currentUserId)"
        />
      </div>

    </k-dialog>
    <!-- 对战详情 -->
    <k-dialog
      :show-hide.sync="openBattleDetailDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="对战详情"
      class="addBox-dialog"
      :show-foot="false"
      :two-btn="false"
    >
      <div class="table_contanier">
        <div class="top_area">
          <span>用户：{{ tableHeadModel.userMobile }}</span>
          <span>总场次：{{ tableHeadModel.battleCount }}</span>
          <span>总胜率：{{ (tableHeadModel.winPercent*100).toFixed(2) }} %</span>
          <span>获得价值(J)：{{ tableHeadModel.battleObtain }}</span>
        </div>
        <!-- 1.玩家对战： -->
        <div class="row_cell">
          <div class="cell" />
          <div class="cell">场次</div>
          <div class="cell">胜率</div>
          <div class="cell">获得价值(J)</div>
        </div>
        <div class="row_cell" @click="expandCell($event,0)">
          <div class="cell"><i class="el-icon-arrow-right" :class="{'active' : isActiveIndex == 0}" />玩家对战</div>
          <div class="cell">{{ playerBattelModel.tableHeadModel.battleCount }} </div>
          <div class="cell">{{ playerBattelModel.tableHeadModel.winPercent }} % </div>
          <div class="cell">{{ playerBattelModel.tableHeadModel.battleObtain }} </div>
        </div>
        <div class="expand_container">
          <div v-for="(item, index ) in playerBattelModel.playerModelArry" :key="index" class="row_cell backcell">
            <div class="cell child">{{ roomClass[index] }}</div>
            <div class="cell">{{ item.battleCount }} </div>
            <div class="cell">{{ item.winPercent }}% </div>
            <div class="cell">{{ item.battleObtain }} </div>
          </div>
        </div>

        <!-- 2主播对战 -->
        <div class="row_cell" @click="expandCell($event,1)">
          <div class="cell"><i class="el-icon-arrow-right" :class="{'active' : isActiveIndex == 1}" />主播对战</div>
          <div class="cell">{{ kolBattelModel.tableHeadModel.battleCount }} </div>
          <div class="cell">{{ kolBattelModel.tableHeadModel.winPercent }} % </div>
          <div class="cell">{{ kolBattelModel.tableHeadModel.battleObtain }} </div>
        </div>
        <div class="expand_container">
          <div v-for="(item, index ) in kolBattelModel.playerModelArry" :key="index" class="row_cell backcell">
            <div class="cell child">{{ roomClass[index] }}</div>
            <div class="cell">{{ item.battleCount }} </div>
            <div class="cell">{{ item.winPercent }}% </div>
            <div class="cell">{{ item.battleObtain }} </div>
          </div>
        </div>
        <!-- 3AI对战： -->
        <div class="row_cell" @click="expandCell($event,2)">
          <div class="cell"><i class="el-icon-arrow-right" :class="{'active' : isActiveIndex == 2}" />AI对战</div>
          <div class="cell">{{ robotBattelModel.tableHeadModel.battleCount }} </div>
          <div class="cell">{{ robotBattelModel.tableHeadModel.winPercent }} % </div>
          <div class="cell">{{ robotBattelModel.tableHeadModel.battleObtain }} </div>
        </div>
        <div class="expand_container">
          <div v-for="(item, index ) in robotBattelModel.playerModelArry" :key="index" class="row_cell backcell">
            <div class="cell child">{{ roomClass[index] }} </div>
            <div class="cell">{{ item.battleCount }} </div>
            <div class="cell">{{ item.winPercent }}% </div>
            <div class="cell">{{ item.battleObtain }} </div>
          </div>
        </div>
        <!-- 4两人对战 -->
        <div class="row_cell" @click="expandCell($event,3)">
          <div class="cell"><i class="el-icon-arrow-right" :class="{'active' : isActiveIndex == 3}" />两人对战</div>
          <div class="cell">{{ twoplayBattelModel.tableHeadModel.battleCount }} </div>
          <div class="cell">{{ twoplayBattelModel.tableHeadModel.winPercent }} % </div>
          <div class="cell">{{ twoplayBattelModel.tableHeadModel.battleObtain }} </div>
        </div>
        <div class="expand_container">
          <div v-for="(item, index ) in twoplayBattelModel.playerModelArry" :key="index" class="row_cell backcell">
            <div class="cell child">{{ roomTypes[index] }} </div>
            <div class="cell">{{ item.battleCount }} </div>
            <div class="cell">{{ item.winPercent }}% </div>
            <div class="cell">{{ item.battleObtain }} </div>
          </div>
        </div>
        <!-- 5.三人对战： -->
        <div class="row_cell" @click="expandCell($event,4)">
          <div class="cell"><i class="el-icon-arrow-right" :class="{'active' : isActiveIndex == 4}" />三人对战</div>
          <div class="cell">{{ threeplayBattelModel.tableHeadModel.battleCount }} </div>
          <div class="cell">{{ threeplayBattelModel.tableHeadModel.winPercent }} % </div>
          <div class="cell">{{ threeplayBattelModel.tableHeadModel.battleObtain }} </div>
        </div>
        <div class="expand_container">
          <div v-for="(item, index ) in threeplayBattelModel.playerModelArry" :key="index" class="row_cell backcell">
            <div class="cell child">{{ roomTypes[index] }} </div>
            <div class="cell">{{ item.battleCount }} </div>
            <div class="cell">{{ item.winPercent }}% </div>
            <div class="cell">{{ item.battleObtain }} </div>
          </div>
        </div>
        <!-- 6四人对战 -->
        <div class="row_cell" @click="expandCell($event,5)">
          <div class="cell"><i class="el-icon-arrow-right" :class="{'active' : isActiveIndex == 5}" />四人对战</div>
          <div class="cell">{{ fourplayBattelModel.tableHeadModel.battleCount }} </div>
          <div class="cell">{{ fourplayBattelModel.tableHeadModel.winPercent }} % </div>
          <div class="cell">{{ fourplayBattelModel.tableHeadModel.battleObtain }} </div>
        </div>
        <div class="expand_container">
          <div v-for="(item, index ) in fourplayBattelModel.playerModelArry" :key="index" class="row_cell backcell">
            <div class="cell child">{{ roomTypes[index] }} </div>
            <div class="cell">{{ item.battleCount }} </div>
            <div class="cell">{{ item.winPercent }}% </div>
            <div class="cell">{{ item.battleObtain }} </div>
          </div>
        </div>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { LisUserData, LisUserRecordByUserId, LisUserRecordDetail } from '@/api/battel/index'
import { battleSumPrice } from '@/api/data/data'

export default {
  name: 'Extension',
  components: { Pagination },
  dicts: ['IDENTITY_TYPE'],
  data() {
    return {
      currentUserId: 0,
      isActiveIndex: -1,
      roomTypes: ['玩家对战', '主播对战', 'AI对战'],
      roomClass: ['两人对战', '三人对战', '四人对战'],
      // 表头
      tableHeadModel: {
        userMobile: undefined,
        battleCount: 0,
        winPercent: 0,
        battleObtain: 0
      },
      // 玩家对战
      playerBattelModel: {
        tableHeadModel: {
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        },
        playerModelArry: []
      },
      // 主播对战
      kolBattelModel: {
        tableHeadModel: {
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        },
        playerModelArry: []
      },
      // AI对战
      robotBattelModel: {
        tableHeadModel: {
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        },
        playerModelArry: []
      },
      twoplayBattelModel: {
        tableHeadModel: {
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        },
        playerModelArry: []
      },
      threeplayBattelModel: {
        tableHeadModel: {
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        },
        playerModelArry: []
      },
      fourplayBattelModel: {
        tableHeadModel: {
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        },
        playerModelArry: []
      },
      recordList: [],
      openBattleDetailDialog: false,
      openBattleRecordDialog: false,
      listData: [],
      recordData: [],
      totalRows: 0, // 分页组件--数据总条数
      recordPager: {
        pageNo: 1,
        pageSize: 10,
        totalRows: '',
        start: ''
      },
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        startTime: '',
        endTime: '',
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        userType: undefined, // 身份所属",
        roomType: undefined, // 消费挡位",
        roomClass: undefined, // 具体消费金额 不需要前端传递",
        roomStatus: undefined, // 消费状态",
        startCreateTime: '', // 最早创建时间",
        endCreateTime: '', // 最终创建时间",

        startStartTime: '', // 最早支付时间",
        endStartTime: '', // 最终支付时间",

        key: '' // 饰品名称'
      },
      battle_count: null, //  对战场次
      win_percent: null, // 胜率
      battle_obtain: null, // 对战获得价值
      timeValue: ''
    }
  },
  watch: {
    timeValue(val) {
      this.listQuery.startStartTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endStartTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.loadData()
    this.tableDate()
  },
  methods: {
    // 表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.loadData()
    },
    // 获取对战结果
    getBattelResult(scope) {
      const rowData = scope.row
      let winStr = ''
      switch (rowData.winStatus) {
        case 1:
          winStr = '获胜'
          break
        case 2:
          winStr = '失败'
          break
        case 3:
          winStr = '平局'
          break
      }
      return winStr
    },
    // 房间状态
    getRoomStatus(scope) {
      const roomStatus = scope.row.roomStatus
      let roomStatusName = ''
      switch (roomStatus) {
        case 1:
          roomStatusName = '等待中'
          break
        case 2:
          roomStatusName = '进行中'
          break
        case 3:
          roomStatusName = '已结束'
          break
        case 4:
          roomStatusName = '已取消'
          break
      }
      return roomStatusName
    },
    // 房间类型
    getRoomType(scope) {
      const roomType = scope.row.roomType
      let roomTypeName = ''
      switch (roomType) {
        case 2:
          roomTypeName = '玩家对战房'
          break
        case 3:
          roomTypeName = '主播对战房'
          break
        case 4:
          roomTypeName = 'AI对战房'
          break
      }
      return roomTypeName
    },
    expandCell(e, index) {
      this.isActiveIndex = index
      const A = e.currentTarget.nextElementSibling
      if (A.style.height == 0 || A.style.height == '0px') {
        const list = document.getElementsByClassName('expand_container')
        for (let i = 0; i < list.length; i++) {
          list[i].style.height = 0
        }
        A.style.height = (2.5 * A.getElementsByClassName('row_cell').length) + 'vw'
      } else {
        this.isActiveIndex = -1
        A.style.height = 0
      }
    },
    // 对战详情
    openBattleDetail(row) {
      this.tableHeadModel = []
      this.tableHeadModel = { ...row }
      LisUserRecordDetail({ userId: row.userId }).then(res => {
        this.openBattleDetailDialog = true
        const list = res.data
        // roomType  区分 2玩家3主播4AI对战
        // roomClass 几人对战房
        // 玩家对战
        this.handleDataNew(list)
      })
    },
    // 对战记录
    openBattleRecord(userId) {
      this.currentUserId = userId
      LisUserRecordByUserId({ userId: userId, 'pager': this.recordPager }).then(res => {
        this.openBattleRecordDialog = true
        const data = res.data
        this.recordData = data.rows
        this.totalRows = data.totalRows
      })
    },
    loadData() {
      LisUserData(this.listQuery).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
      })
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
      if (this.battle_count != null) {
        this.battle_count = null
      }
      if (this.win_percent != null) {
        this.win_percent = null
      }
      if (this.battle_obtain != null) {
        this.battle_obtain = null
      }
      this.tableDate()
    },
    // 表格数据处理
    handleDataNew(list) {
      this.playerBattelModel.playerModelArry = []
      for (let i = 0; i < 3; i++) {
        this.playerBattelModel.playerModelArry.push({
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        })
      }
      this.kolBattelModel.playerModelArry = []
      for (let i = 0; i < 3; i++) {
        this.kolBattelModel.playerModelArry.push({
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        })
      }
      this.robotBattelModel.playerModelArry = []
      this.robotBattelModel.playerModelArry.push({
        battleCount: 0,
        winPercent: 0,
        battleObtain: 0
      })
      this.twoplayBattelModel.playerModelArry = []
      for (let i = 0; i < 3; i++) {
        this.twoplayBattelModel.playerModelArry.push({
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        })
      }
      this.threeplayBattelModel.playerModelArry = []
      for (let i = 0; i < 2; i++) {
        this.threeplayBattelModel.playerModelArry.push({
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        })
      }
      this.fourplayBattelModel.playerModelArry = []
      for (let i = 0; i < 2; i++) {
        this.fourplayBattelModel.playerModelArry.push({
          battleCount: 0,
          winPercent: 0,
          battleObtain: 0
        })
      }
      // 玩家对战
      const playerzero = list[0]
      this.playerBattelModel.tableHeadModel.battleCount = playerzero.count
      this.playerBattelModel.tableHeadModel.winPercent = playerzero.percent
      this.playerBattelModel.tableHeadModel.battleObtain = playerzero.price
      const playerone = list[1]
      this.playerBattelModel.playerModelArry[0].battleCount = playerone.count
      this.playerBattelModel.playerModelArry[0].winPercent = playerone.percent
      this.playerBattelModel.playerModelArry[0].battleObtain = playerone.price
      const playertwo = list[2]
      this.playerBattelModel.playerModelArry[1].battleCount = playertwo.count
      this.playerBattelModel.playerModelArry[1].winPercent = playertwo.percent
      this.playerBattelModel.playerModelArry[1].battleObtain = playertwo.price
      const playerthree = list[3]
      this.playerBattelModel.playerModelArry[2].battleCount = playerthree.count
      this.playerBattelModel.playerModelArry[2].winPercent = playerthree.percent
      this.playerBattelModel.playerModelArry[2].battleObtain = playerthree.price
      // 主播对战
      const kolzero = list[4]
      this.kolBattelModel.tableHeadModel.battleCount = kolzero.count
      this.kolBattelModel.tableHeadModel.winPercent = kolzero.percent
      this.kolBattelModel.tableHeadModel.battleObtain = kolzero.price
      const kolone = list[5]
      this.kolBattelModel.playerModelArry[0].battleCount = kolone.count
      this.kolBattelModel.playerModelArry[0].winPercent = kolone.percent
      this.kolBattelModel.playerModelArry[0].battleObtain = kolone.price
      const koltwo = list[6]
      this.kolBattelModel.playerModelArry[1].battleCount = koltwo.count
      this.kolBattelModel.playerModelArry[1].winPercent = koltwo.percent
      this.kolBattelModel.playerModelArry[1].battleObtain = koltwo.price
      const kolthree = list[7]
      this.kolBattelModel.playerModelArry[2].battleCount = kolthree.count
      this.kolBattelModel.playerModelArry[2].winPercent = kolthree.percent
      this.kolBattelModel.playerModelArry[2].battleObtain = kolthree.price
      // AI对战
      const robotzero = list[8]
      this.robotBattelModel.tableHeadModel.battleCount = robotzero.count
      this.robotBattelModel.tableHeadModel.winPercent = robotzero.percent
      this.robotBattelModel.tableHeadModel.battleObtain = robotzero.price
      const robotone = list[9]
      this.robotBattelModel.playerModelArry[0].battleCount = robotone.count
      this.robotBattelModel.playerModelArry[0].winPercent = robotone.percent
      this.robotBattelModel.playerModelArry[0].battleObtain = robotone.price
      // 兩人對戰
      const twozero = list[10]
      this.twoplayBattelModel.tableHeadModel.battleCount = twozero.count
      this.twoplayBattelModel.tableHeadModel.winPercent = twozero.percent
      this.twoplayBattelModel.tableHeadModel.battleObtain = twozero.price
      const twoone = list[11]
      this.twoplayBattelModel.playerModelArry[0].battleCount = twoone.count
      this.twoplayBattelModel.playerModelArry[0].winPercent = twoone.percent
      this.twoplayBattelModel.playerModelArry[0].battleObtain = twoone.price
      const twotwo = list[12]
      this.twoplayBattelModel.playerModelArry[1].battleCount = twotwo.count
      this.twoplayBattelModel.playerModelArry[1].winPercent = twotwo.percent
      this.twoplayBattelModel.playerModelArry[1].battleObtain = twotwo.price
      const twothree = list[13]
      this.twoplayBattelModel.playerModelArry[2].battleCount = twothree.count
      this.twoplayBattelModel.playerModelArry[2].winPercent = twothree.percent
      this.twoplayBattelModel.playerModelArry[2].battleObtain = twothree.price
      // 三人對戰
      const threezero = list[14]
      this.threeplayBattelModel.tableHeadModel.battleCount = threezero.count
      this.threeplayBattelModel.tableHeadModel.winPercent = threezero.percent
      this.threeplayBattelModel.tableHeadModel.battleObtain = threezero.price
      const threeone = list[15]
      this.threeplayBattelModel.playerModelArry[0].battleCount = threeone.count
      this.threeplayBattelModel.playerModelArry[0].winPercent = threeone.percent
      this.threeplayBattelModel.playerModelArry[0].battleObtain = threeone.price
      const threetwo = list[16]
      this.threeplayBattelModel.playerModelArry[1].battleCount = threetwo.count
      this.threeplayBattelModel.playerModelArry[1].winPercent = threetwo.percent
      this.threeplayBattelModel.playerModelArry[1].battleObtain = threetwo.price
      // 四人對戰
      const fourzero = list[17]
      this.fourplayBattelModel.tableHeadModel.battleCount = fourzero.count
      this.fourplayBattelModel.tableHeadModel.winPercent = fourzero.percent
      this.fourplayBattelModel.tableHeadModel.battleObtain = fourzero.price
      const fourone = list[18]
      this.fourplayBattelModel.playerModelArry[0].battleCount = fourone.count
      this.fourplayBattelModel.playerModelArry[0].winPercent = fourone.percent
      this.fourplayBattelModel.playerModelArry[0].battleObtain = fourone.price
      const fourtwo = list[19]
      this.fourplayBattelModel.playerModelArry[1].battleCount = fourtwo.count
      this.fourplayBattelModel.playerModelArry[1].winPercent = fourtwo.percent
      this.fourplayBattelModel.playerModelArry[1].battleObtain = fourtwo.price
    },
    tableDate() {
      if (!this.authorityHandle(209)) return
      this.$nextTick(() => {
        const html3 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
          .querySelectorAll('td')[3]
          .querySelector('.cell')
        html3.innerHTML = `${this.battle_count != null ? this.battle_count : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html3.onclick = () => {
          battleSumPrice({ field: 'battle_count', ...this.listQuery }).then(res => {
            this.battle_count = res.data
            this.tableDate()
          })
        }
        const html4 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
          .querySelectorAll('td')[4]
          .querySelector('.cell')
        html4.innerHTML = `${this.win_percent != null ? (this.win_percent * 100).toFixed(2) + '%' : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html4.onclick = () => {
          battleSumPrice({ field: 'win_percent', ...this.listQuery }).then(res => {
            this.win_percent = res.data
            this.tableDate()
          })
        }
        const html5 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
          .querySelectorAll('td')[5]
          .querySelector('.cell')
        html5.innerHTML = `${this.battle_obtain != null ? this.battle_obtain : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html5.onclick = () => {
          battleSumPrice({ field: 'battle_obtain', ...this.listQuery }).then(res => {
            this.battle_obtain = res.data
            this.tableDate()
          })
        }
      })
    },
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) sums[index] = '合计'
        else if (column.property === 'battleCount') {
          sums[index] = ''
        } else if (column.property === 'winPercent') {
          sums[index] = ''
        } else if (column.property === 'battleObtain') {
          sums[index] = ''
        }
      })
      return sums
    }

  }
}
</script>

<style lang="scss" scoped>
$borderColor:#E8E8E8;// 主色调
$backColor:#F5F5F5;// 主色调
$mainColor:#3b425d;// 主色调
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .right-item{
      margin-right: 10px;
    }
  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}
.table-cell{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.record_container{
}
.record_dialog{
  ::v-deep .el-dialog__body{
    padding: 30px 80px;
    height: 70%;
  }
}
.addBox-dialog{
  ::v-deep .el-dialog__body{
    padding: 30px 80px;
  }
  .table_contanier{
    display: flex;
    flex-direction: column;
    .top_area{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-bottom: 20px;
    }
    .row_cell{
      display: flex;
      flex-direction: row;
      border: 1px solid $borderColor;
      border-right: none;
      border-bottom: none;
    }
    .cell{
      text-align: center;
      width: 160px;
      line-height: 60px;
      height: 60px;
      border-right: 1px solid $borderColor;
      border-bottom: 1px solid $borderColor;
      transform: translateY(1px);
      i{
        transition: .3s;
        &.active{
          transform: rotate(90deg);
        }
      }
    }
    .backcell{
      background: $backColor;
    }
    .child{
        padding-left: 30px;
    }
    .expand_container{
      height: 0;
      overflow: hidden;
      transition: 0.3s;
    }
  }
}
.image-div{
  display: flex;
  flex-direction: row;
  justify-content: center;
  &:last-child{
    margin-right: 20px;
  }
  .image-item{
    position: relative;
    width: 70px;
    height: 70px;
    .imageicon{
        width: 70px;
        height: 70px;
      }
    .boxCount{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 19px;
      height: 19px;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      position:absolute;
      color: $mainColor;
      right: 0;
      top:0;
    }
    &::before{
      display: block;
      content:'×';
      font-size: 13px;
      font-weight: 700;
      position:absolute;
      color: $mainColor;
      right: 0;
      top:0;
      transform: translateX(-15px);
    }
  }

}
</style>
